<template>
	<view class="content">
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar leftIcon="arrow-left" :title="title" bgColor="#fff" leftIconColor="#000"
			:fixed="true" :titleStyle="titleStyle" @leftClick="$back" >
			<view slot="right">
				<text style="padding: 5px 16px;border-radius: 12px;background: #45C4B0;font-size: 10px;color: #fff;" @click="submit">提交</text>
			</view>
		</u-navbar>
		<!-- #endif -->
		<view class="tips_box display-flex">
			<text class="tip_cont">为了确保我们平台的写手具备相应的创作能力，并为用户提供高质量的服务，根据平台规定，创建相应类型的橱窗前需要完成资质认证。</text>
		</view>
		<view class="baibox">
			<view class="baili other_wrap" @tap="$goRedirect('/showcase/showcase/content?type=1')">
				<view class="item">
					<view class="left">
						<view class="title">
							<block v-if="id == 8">就业时长</block>
							<block v-else>创作时长</block>
							<span>*</span>
						</view>
					</view>
					<view class="other" :style="{'color': duration0 ? '#45C4B0' : '#999'}" v-if="id == 0">
						{{duration0 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': duration1 ? '#45C4B0' : '#999'}" v-if="id == 1">
						{{duration1 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': duration2 ? '#45C4B0' : '#999'}" v-if="id == 2">
						{{duration2 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': duration3 ? '#45C4B0' : '#999'}" v-if="id == 3">
						{{duration3 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': duration4 ? '#45C4B0' : '#999'}" v-if="id == 4">
						{{duration4 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': duration5 ? '#45C4B0' : '#999'}" v-if="id == 5">
						{{duration5 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': duration7 ? '#45C4B0' : '#999'}" v-if="id == 7">
						{{duration7 ? '已输入' : '请输入'}}
					</view>
					
					<image :src="'/images/auth-arrow.png' | formatImgUrl" class="rarr" mode="aspectFit"></image>
				</view>
				<view class="bottom">
					<input type="text" disabled class="other_ipt" value="" placeholder="是否具有与商业用文创作相关的经历。" v-if="id == 0"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="是否具有与推广用文创作相关的经历。" v-if="id == 1"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="是否具有与应用文创作相关的经历。" v-if="id == 2"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="是否具有与文案创作相关的经历。" v-if="id == 3 || id == 5 || id == 7"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="是否具有与润色修改相关的经历。" v-if="id == 4"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="是否具有与法律文书相关的就业经历。" v-if="id == 8"/>
				</view>
			</view>
			<view class="baili other_wrap" @tap="$goRedirect('/showcase/showcase/content?type=2')">
				<view class="item">
					<view class="left">
						<view class="title">
							<block v-if="id == 0">所属行业</block>
							<block v-if="id == 1">推广平台</block>
							<block v-if="id == 2">应用方向</block>
							<block v-if="id == 3 || id == 5 || id == 7">作品类型</block>
							<block v-if="id == 4">修改方式</block>
							<block v-if="id == 8">内容方向</block>
							<span>*</span>
						</view>
					</view>
					<view class="other" :style="{'color': industry0 ? '#45C4B0' : '#999'}" v-if="id == 0">
						{{industry0 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': industry1 ? '#45C4B0' : '#999'}" v-if="id == 1">
						{{industry1 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': industry2 ? '#45C4B0' : '#999'}" v-if="id == 2">
						{{industry2 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': industry3 ? '#45C4B0' : '#999'}" v-if="id == 3">
						{{industry3 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': industry4 ? '#45C4B0' : '#999'}" v-if="id == 4">
						{{industry4 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': industry5 ? '#45C4B0' : '#999'}" v-if="id == 5">
						{{industry5 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': industry7 ? '#45C4B0' : '#999'}" v-if="id == 7">
						{{industry7 ? '已输入' : '请输入'}}
					</view>
					
					<image :src="'/images/auth-arrow.png' | formatImgUrl" class="rarr" mode="aspectFit"></image>
				</view>
				<view class="bottom">
					<input type="text" disabled class="other_ipt" value="" placeholder="是否具备相关的行业知识和专业术语。" v-if="id == 0"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="日常发布推广用文的内容平台。" v-if="id == 1"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="简单描述自己作品的应用场合。" v-if="id == 2"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="简单描述自己作品的类型。" v-if="id == 3 || id == 5 || id == 7"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="简单描述自己的修改方式，大修或小修。" v-if="id == 4"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="简单描述自己擅长的法律文书内容方向" v-if="id == 8"/>
				</view>
			</view>
	
			<view class="baili other_wrap" @tap="$goRedirect('/showcase/showcase/content?type=3')">
				<view class="item">
					<view class="left">
						<view class="title">
							<block v-if="id == 0">项目经验</block>
							<block v-if="id == 1">文笔类型</block>
							<block v-if="id == 2">应用类型</block>
							<block v-if="id == 3 || id == 5 || id == 7">文笔风格</block>
							<block v-if="id == 4">修改类型</block>
							<block v-if="id == 8">相应资质</block>
							<span>*</span>
						</view>
					</view>
					<view class="other" :style="{'color': experience0 ? '#45C4B0' : '#999'}" v-if="id == 0">
						{{experience0 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': experience1 ? '#45C4B0' : '#999'}" v-if="id == 1">
						{{experience1 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': experience2 ? '#45C4B0' : '#999'}" v-if="id == 2">
						{{experience2 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': experience3 ? '#45C4B0' : '#999'}" v-if="id == 3">
						{{experience3 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': experience4 ? '#45C4B0' : '#999'}" v-if="id == 4">
						{{experience4 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': experience5 ? '#45C4B0' : '#999'}" v-if="id == 5">
						{{experience5 ? '已输入' : '请输入'}}
					</view>
					<view class="other" :style="{'color': experience7 ? '#45C4B0' : '#999'}" v-if="id == 7">
						{{experience7 ? '已输入' : '请输入'}}
					</view>
					<image :src="'/images/auth-arrow.png' | formatImgUrl" class="rarr" mode="aspectFit"></image>
				</view>
				<view class="bottom">
					<input type="text" disabled class="other_ipt" value="" placeholder="是否熟悉商业写作的规范、风格和要求。" v-if="id == 0"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="整体创作的风格类型，内容倾向。" v-if="id == 1"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="简单描述自己作品的应用类型。" v-if="id == 2"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="整体创作的风格类型，内容倾向。" v-if="id == 3 || id == 5 || id == 7"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="简单描述自己可修改的内容类型。" v-if="id == 4"/>
					<input type="text" disabled class="other_ipt" value="" placeholder="上传自己具有法律文书创作能力的证明。" v-if="id == 8"/>
				</view>
			</view>
	
			<view class="baili other_wrap">
				<view class="item display-flex just-between" style="margin-bottom: 20rpx;">
					<view class="left">
						<view class="title">
							作品展示
							<span>*</span>
						</view>
					</view>
					<view class="other" :style="{'color': img.length > 0 ? '#45C4B0' : '#999'}">
						{{img.length > 0 ? '已上传' : '请上传'}}
					</view>
					<image :src="'/images/auth-arrow.png' | formatImgUrl" class="rarr" mode="aspectFit"></image>
				</view>
				<view class="img_bottom">
					<view class="imgView">
						<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="4" width="78" height="78" :action="uploadImgUrl" :fileList="img" @afterRead='afterRead' @delete="deletePic">
						</u-upload>
					</view>
				</view>
	
				<view class="tip" v-if="id == 0">
					为了确保平台审核评估的准确性和全面性，请提供相应行业的商业用文作品样本。这些样本可以采用文本或图片的形式，以便我们进行详细的审核和评估。
				</view>
				<view class="tip" v-if="id == 1">
					为了确保平台审核评估的准确性和全面性，请提供相应行业的宣发用文作品样本。这些样本可以采用文本或图片的形式，以便我们进行详细的审核和评估。
				</view>
				<view class="tip" v-if="id == 2">
					为了确保平台审核评估的准确性和全面性，请提供相应行业的应用文作品样本。这些样本可以采用文本或图片的形式，以便我们进行详细的审核和评估。
				</view>
				<view class="tip" v-if="id == 3">
					为了确保平台审核评估的准确性和全面性，请提供相应行业的文案作品样本。这些样本可以采用文本或图片的形式，以便我们进行详细的审核和评估。
				</view>
				<view class="tip" v-if="id == 4">
					为了确保平台审核评估的准确性和全面性，请提供相应行业的润色修改的作品样本。这些样本可以采用文本或图片的形式，以便我们进行详细的审核和评估。
				</view>
				<view class="tip" v-if="id == 5">
					为了确保平台审核评估的准确性和全面性，请提供相应行业的定制文作品样本。这些样本可以采用文本或图片的形式，以便我们进行详细的审核和评估。
				</view>
				<view class="tip" v-if="id == 7">
					为了确保平台审核评估的准确性和全面性，请提供相应行业的法律文书作品样本。这些样本可以采用文本或图片的形式，以便我们进行详细的审核和评估。
				</view>
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="ti" @click="submit(true)">
			提交
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	export default{
		data(){
			return {
				paddingBottomHeight: 0,
				duration0: "",
				duration1: "",
				duration2: "",
				duration3: "",
				duration4: "",
				duration5: "",
				duration7: "",
				
				industry0: "",
				industry1: "",
				industry2: "",
				industry3: "",
				industry4: "",
				industry5: "",
				industry7: "",
				
				experience0: "",
				experience1: "",
				experience2: "",
				experience3: "",
				experience4: "",
				experience5: "",
				experience7: "",
				img: [],
				fileList2: [],
				id: "",
				titleStyle: {
					color: '#000'
				},
				title: '资质审核'
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		
		},
		onLoad(options) {
			if(uni.getStorageSync('type_name')){
				this.title = uni.getStorageSync('type_name') + '资质认证'
			}
			
			if(options.id){
				uni.setStorageSync('type_id',options.id)
			}
			
			if(options.type && options.type == 1){
				uni.setStorageSync('duration'+ options.id,options.content)
			}
			
			if(options.type && options.type == 2){
				uni.setStorageSync('industry'+ options.id,options.content)
			}
			if(options.type && options.type == 3){
				uni.setStorageSync('experience'+ options.id,options.content)
			}
			
			this.id = uni.getStorageSync('type_id')
			this.duration0 = uni.getStorageSync('duration0')
			this.duration1 = uni.getStorageSync('duration1')
			this.duration2 = uni.getStorageSync('duration2')
			this.duration3 = uni.getStorageSync('duration3')
			this.duration4 = uni.getStorageSync('duration4')
			this.duration5 = uni.getStorageSync('duration5')
			this.duration7 = uni.getStorageSync('duration7')
			
			this.industry0 = uni.getStorageSync('industry0')
			this.industry1 = uni.getStorageSync('industry1')
			this.industry2 = uni.getStorageSync('industry2')
			this.industry3 = uni.getStorageSync('industry3')
			this.industry4 = uni.getStorageSync('industry4')
			this.industry5 = uni.getStorageSync('industry5')
			this.industry7 = uni.getStorageSync('industry7')
			
			this.experience0 = uni.getStorageSync('experience0')
			this.experience1 = uni.getStorageSync('experience1')
			this.experience2 = uni.getStorageSync('experience2')
			this.experience3 = uni.getStorageSync('experience3')
			this.experience4 = uni.getStorageSync('experience4')
			this.experience5 = uni.getStorageSync('experience5')
			this.experience7 = uni.getStorageSync('experience7')
			
		},
		methods:{
			$goRedirect(url){
				uni.redirectTo({
					url: url + '&id=' + this.id
				})
			},
			// 提交
			submit(){
				let duration;
				if(this.id == 0 && this.duration0){
					duration = this.duration0
				}
				if(this.id == 1 && this.duration1){
					duration = this.duration1
				}
				if(this.id == 2 && this.duration2){
					duration = this.duration2
				}
				if(this.id == 3 && this.duration3){
					duration = this.duration3
				}
				if(this.id == 4 && this.duration4){
					duration = this.duration4
				}
				if(this.id == 5 && this.duration5){
					duration = this.duration5
				}
				if(this.id == 7 && this.duration7){
					duration = this.duration7
				}
				
				let industry;
				if(this.id == 0 && this.industry0){
					industry = this.industry0
				}
				if(this.id == 1 && this.industry1){
					industry = this.industry1
				}
				if(this.id == 2 && this.industry2){
					industry = this.industry2
				}
				if(this.id == 3 && this.industry3){
					industry = this.industry3
				}
				if(this.id == 4 && this.industry4){
					industry = this.industry4
				}
				if(this.id == 5 && this.industry5){
					industry = this.industry5
				}
				if(this.id == 7 && this.industry7){
					industry = this.industry7
				}
				
				let experience;
				if(this.id == 0 && this.experience0){
					experience = this.experience0
				}
				if(this.id == 1 && this.experience1){
					experience = this.experience1
				}
				if(this.id == 2 && this.experience2){
					experience = this.experience2
				}
				if(this.id == 3 && this.experience3){
					experience = this.experience3
				}
				if(this.id == 4 && this.experience4){
					experience = this.experience4
				}
				if(this.id == 5 && this.experience5){
					experience = this.experience5
				}
				if(this.id == 7 && this.experience7){
					experience = this.experience7
				}
				
				if(!duration || !industry || !experience){
					this.$common.errorToShow('请输入完整')
					return
				}
				
				if(this.fileList2.length == 0 || this.fileList2.length < 4){
					this.$common.errorToShow('请上传四张作品图片')
					return
				}
				
				this.$api.default.request('good/qualifications',{
					type: this.id,
					duration: duration,
					industry: industry,
					experience: experience,
					works: this.fileList2
				}).then((res) => {
					if(res.code == 1){
						this.$common.successToShow(res.msg, () => {
							
							let param1 = 'duration' + this.id
							if(uni.getStorageSync(param1)){
								uni.removeStorageSync(param1)
							}
							let param2 = 'duration' + this.id
							if(uni.getStorageSync(param2)){
								uni.removeStorageSync(param2)
							}
							
							let param3 = 'experience' + this.id
							if(uni.getStorageSync(param3)){
								uni.removeStorageSync(param3)
							}
							
							uni.navigateBack()
						})
					}
				})
			},
			// 删除图片
			deletePic(index) {
				this.img.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.img.length
				lists.map((item) => {
					this.img.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.img[fileListLen]
					this.img.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		/* #ifndef MP-WEIXIN */
		padding-top: calc(var(--status-bar-height) +  45px);
		/* #endif */

		.pjbox1 {
			width: 100%;
			height: 98rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			left: 0;
			bottom: 0;

			view {
				float: left;
				width: 40%;
				height: 60rpx;
				line-height: 60rpx;
				margin: 0 auto;
				text-align: center;
				font-size: 24rpx;

				&:first-child {
					background: rgba(216, 216, 216, 0.3);
					color: #999;
				}

				&:last-child {
					background: rgba(216, 216, 216, 0.3);
					color: #fff;
					background: #45C4B0;
					border-radius: 4px;
				}
			}

		}

		.imgView {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.imgList {
				position: relative;
				padding-bottom: 10rpx;
				margin-right: 11rpx;

				.imgClose {
					position: absolute;
					top: -1px;
					right: -1px;
					z-index: 1;
					width: 26rpx;
					height: 26rpx;
				}
			}

			.imgList:first-child {
				margin-left: 0rpx;
			}
		}

		.baibox {
			background-color: #FFFFFF;
			padding: 0 30rpx;
			margin-bottom: 20rpx;

			.baili:last-child {
				border-bottom: none;
			}

			.other_wrap {
				flex-direction: column;
				align-items: initial !important;

				.item {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
				}

				.other_ipt {
					font-size: 12px;
					color: #999;
				}

				.tip {
					font-size: 22rpx;
					font-weight: normal;
					color: #999999;
				}
			}

			.baili {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);

				.other {
					font-size: 28rpx;
					font-weight: normal;
					color: #45C4B0;
					padding-right: 40rpx;
				}

				.zhan {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.left {
					flex-shrink: 0;

					.title {
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						padding-bottom: 0rpx;

						span {
							color: red;
							margin-left: 7rpx
						}

						.lw {
							font-size: 24rpx;
							color: #999;
							font-weight: 500;
						}
					}

					.txt {
						font-size: 24rpx;
						font-weight: normal;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
				}

				.rarr {
					position: absolute;
					right: 0;
					top: 5rpx;
					width: 30rpx;
					height: 30rpx;
					flex-shrink: 0;
				}
			}
		}

		.ti {
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;
			margin: 0 auto;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #FFFFFF;
		}
	}

	// 认证提醒
	.tips_box {
		padding: 20rpx 30rpx;
		background: #E5FFFB;
		font-family: '思源黑体';
		font-size: 10px;
		color: #45C4B0;

		.tip_btn {
			margin-left: 25rpx;
			white-space: nowrap;
			padding: 2rpx 12rpx;
			border-radius: 126px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #45C4B0;

		}
	}
</style>